<template>
  <el-button @click="onDialogShow">Rename</el-button>
  <el-dialog v-model="renameDialogVisible">
    <el-input v-model="name"></el-input>
    <el-button @click="onRename">Rename</el-button>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from "vue-demi";

export default defineComponent({
  emits: ["rename"],
  props: {
    oldName: String,
  },
  data() {
    return {
      name: this.oldName,
      renameDialogVisible: false,
    };
  },
  methods: {
    onRename() {
      this.$emit("rename", this.name);
      this.renameDialogVisible = false
    },
    onDialogShow() {
      this.renameDialogVisible = true;
      this.name = this.oldName
    },
  },
});
</script>

<style>
</style>